<!-- 小组分组滚动组件 -->
<template>
  <div class="groups-wrapper">
    <div v-for="(group, index) in displayGroups" :key="index" class="group-item" v-if="group">
      <div class="group-members">
        <span class="group-name">{{ group.name || '未命名小组' }}</span>
        <span v-for="(member, mIndex) in group.members" :key="mIndex" class="member-item">
          {{ member }}
          <span v-if="mIndex < group.members.length - 1" class="separator">|</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Roll',
  data() {
    return {
      currentIndex: 0,
      timer: null,
      groups: [],
      data: {
        missionType: this.$store.state.mission,
        studentClassId: this.$store.state.current
      },
      groupCount: 5
    }
  },
  created() {
    this.fetchGroups();
  },
  computed: {
    displayGroups() {
      if (!this.groups || this.groups.length === 0) {
        return [];
      }
      const result = [];
      for (let i = 0; i < 2; i++) {
        const index = (this.currentIndex + i) % this.groups.length;
        if (this.groups[index]) {
          result.push(this.groups[index]);
        }
      }
      return result;
    },
    studentClassId() {
      return this.$store.state.current;
    },
    missionType() {
      return this.$store.state.mission;
    }
  },
  watch: {
    studentClassId(newValue) {
      this.data.studentClassId = newValue;
      this.fetchGroups();
    },
    missionType(newValue) {
      this.data.missionType = newValue;
      this.fetchGroups();
    }
  },
  mounted() {
    this.startMarquee()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    async fetchGroups() {
      try {
        const response = await this.$axios.post("/group/list?groupCount=" + this.groupCount, this.data);
        this.groups = response.data.data;
      } catch (error) {
        console.error('获取数据失败', error);
      }
    },
    startMarquee() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.groups.length
      }, 3000)
    }
  }
}
</script>
<style scoped>
.groups-wrapper {

  height: 80%;
  font-family: 'Arial', sans-serif;
  background-color: #0a192f;
  color: #00ffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

.groups-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: scanline 3s linear infinite;
}

@keyframes scanline {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

.group-item {
  background: rgba(10, 25, 47, 0.8);
  border: 1px solid #1e2a4a;
  border-radius: 6px;
  padding: 5px 15px 19px 15px;
  margin-bottom: 10px;
  transition: all 0.5s ease;
  position: relative;
  height: 30%;
}

.group-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(100, 255, 218, 0.2);
  border-color: #64ffda;
}

.group-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #00ffff, #0a192f);
}

.group-name {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #ccd6f6;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 15px;
}

.group-name::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: #64ffda;
}

.member-item {
  display: inline-block;
  margin-right: 8px;
  font-size: 14px;
  color: #5daaf7;
  position: relative;
  transition: color 0.3s ease;
}

.member-item:hover {
  color: #00eeff;
}

.separator {
  margin-left: 8px;
  color: #34519e;
}


.group-item:nth-child(odd) {
  animation: flicker 8s infinite alternate;
}

.group-item:nth-child(even) {
  animation: flicker 7s infinite alternate-reverse;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .group-name {
    font-size: 16px;
  }
  
  .member-item {
    font-size: 13px;
  }
}
</style>